<template>
    <div>
        <h1>智慧养老管理系统显示</h1>
        <a href="/Add">新增养老系统</a>
        <a href="https://localhost:7067/api/Messager/UpdownExcel">文件导出</a>
        机构名称
        <input type="text" v-model="page.name">
        特色服务
        <select v-model="page.messagerTypes">
            <option value="">==请选择==</option>
            <option value="1">24h护理</option>
            <option value="2">特殊护理</option>
        </select>

        <input type="button" value="查询" @click="Show">
        <table class="table">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" v-model="Quan" @change="QuanX">
                    </td>
                    <td>编号</td>
                    <td>机构名称</td>
                    <td>特色服务</td>
                    <td>分享</td>
                    <td>收藏</td>
                    <td>更新人</td>
                    <td>最后时间</td>
                    <td>状态</td>
                    <td>图片</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="a in data">
                    <td>
                        <input type="checkbox" :value="a.id" v-model="Fan" @change="FanX">
                    </td>
                    <td>{{a.id}}</td>
                    <td>{{a.name}}</td>
                    <td>{{a.messagerTypes}}</td>
                    <td>{{a.fenX}}</td>
                    <td>{{a.num}}</td>
                    <td>{{a.people}}</td>
                    <td>{{a.times}}</td>
                    <td>{{a.type?"已发布":"未发布"}}</td>
                    <td> <img :src="'https://localhost:7067'+a.img" width="90px" height="90px" ></td>
                    <td>
                        <input type="button" value="逻辑删除" @click="DeleteType(a.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="FenY(1)">
        <input type="button" value="上一页" @click="FenY(2)">
        <input type="button" value="下一页" @click="FenY(3)">
        <input type="button" value="尾页" @click="FenY(4)">
        一共{{ pagecount.pcount }}页,一共{{ pagecount.count }}条,当前第{{ page.index }}页,每页{{ page.size }}条
        <input type="button" value="批量修改" @click="UpdataType">
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref } from 'vue';
import { onMounted } from 'vue';



onMounted(()=>{
    Show();
})

//全选
const Quan=ref(false);
//反选
const Fan=ref<Number[]>([]);

const QuanX=()=>{
    if(Quan.value){
        data.value.forEach(x=>{
            Fan.value.push(x.id);
        })
    }else{
        Fan.value=[];
    }
}

const FanX=()=>{
    if(Fan.value.length==data.value.length){
        Quan.value=true;
    }else{
        Quan.value=false;
    }
}

const data=ref([{
    "id": 0,
      "name": "三养福利养老机构",
      "messagerTypes": "特殊护理",
      "fenX": 0,
      "num": 0,
      "type": false,
      "people": "李明明",
      "times": "2025-03-19T03:04:22.193",
      "img": "/img/2.webp",
      "addres": "海淀区",
      "phone": "18293878978",
      "isid": false
}])

const page=ref({
    name:"",
    messagerTypes:"",
    index:1,
    size:3,
})

const pagecount=ref({
    count:0,
    pcount:0,
})

//分页
const FenY=(s:any)=>{
    if(s==1){
        page.value.index=1;
        Show();
    }
    if(s==2){
        if(page.value.index>1){
            page.value.index-=1;
            Show();
        }
    }
    if(s==3){
        if(page.value.index<pagecount.value.pcount){
            page.value.index+=1;
            Show();
        }
    }
    if(s==4){
        page.value.index=pagecount.value.pcount;
        Show();
    }
}

//显示
const Show=()=>{
    axios.get("https://localhost:7067/api/Messager/GetAll",{params:page.value}).then(res=>{
        data.value=res.data.data;
        pagecount.value.count=res.data.count;
        pagecount.value.pcount=Math.ceil(res.data.count/page.value.size);
    })
}

//逻辑删除
const DeleteType=(vid:any)=>{
    if(!confirm("确认要删除吗")){

    }
    axios.delete("https://localhost:7067/api/Messager/DeleteType",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert('逻辑删除成功');
            Show();
        }else{
            alert('逻辑删除失败');
        }
    })
}

//批量修改
const UpdataType=()=>{
    axios.get("https://localhost:7067/api/Messager/UpdateType",{params:{id:Fan.value.toString()}}).then(res=>{
        if(res.data>0){
            alert('批量修改状态成功');
            Show();
        }else{
            alert('批量修改状态失败');
        }
    })
}

</script>

<style scoped>

</style>